<template>
  <q-item class="q-pa-none">
    <q-item-section top avatar>
      <q-avatar>
        <q-img
          :src="webStroe.userInfo.avatar"
          errorSrc="/images/default-avatar.png"
          :ratio="1 / 1"
        />
      </q-avatar>
    </q-item-section>
    <q-item-section>
      <q-editor
        v-if="webStroe.isLogin"
        placeholder="文明交流，友好发言.."
        :toolbar="[]"
        @keyup.ctrl.enter.stop="
          () => {
            submit();
          }
        "
        v-model="editor"
        min-height="5rem"
      >
      </q-editor>
      <div
        v-if="!webStroe.isLogin"
        class="h-[5rem] flex justify-center items-center"
      >
        <q-btn
          flat
          color="primary"
          @click="
            () => {
              webStroe.loginDig = true;
            }
          "
        >
          登录以发布评论
        </q-btn>
      </div>

      <div class="flex justify-between q-py-xs">
        <q-btn dense flat icon="emoji_emotions">
          <EmojiSel
            @emoji-click="
              (emoji) => {
                emojiClick(emoji);
              }
            "
          ></EmojiSel>
          <q-tooltip> 表情 </q-tooltip>
        </q-btn>

        <q-btn
          @click="
            () => {
              submit();
            }
          "
          :disable="editor.length == 0"
          dense
          color="primary"
        >
          <span class="q-mx-sm">发布</span>
        </q-btn>
      </div>
    </q-item-section>
  </q-item>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { commentAdd } from 'src/service/api';
import { useWebStore } from 'src/stores/webStore';
import { useYuan } from 'src/use';
import { articleId } from './shared';
import EmojiSel from './EmojiSel.vue';

const webStroe = useWebStore();
const { Ok, Fail } = useYuan();

const emit = defineEmits<{
  addComment: [data: Api.CommentVO];
}>();

const editor = ref('');

const emojiClick = (item: string) => {
  if (webStroe.isLogin) {
    editor.value += item;
  }
};

const submit = () => {
  if (editor.value.trim().length == 0) {
    return Fail('评论内容不可为空');
  }
  commentAdd({
    articleId: articleId.value,
    content: editor.value,
    parentId: '0',
    replyId: '0',
  }).then(({ data }) => {
    if (data) {
      editor.value = '';
      emit('addComment', data);
      Ok('发送成功');
    }
  });
};
</script>

<style scoped></style>
